<template>
  <div class="order-detail" :style="(orderDetail && orderDetail.payment_status==1)?'padding-bottom:0':''">
    <scroll ref="scrollDiv" v-if="orderDetail" :data="orderDetail.order_items">
      <div>
        <ul class="step" v-if="orderDetail.status != 0 && orderDetail.status != 6">
          <li class="item first" :class="{'step-1': orderDetail.status>=1}"><i class="icon-circle"></i><span class="txt">待付款</span></li>
          <li class="item" :class="{'step-1': orderDetail.status>=2}"><i class="icon-circle"></i><span class="txt">待发货</span></li>
          <li class="item" :class="{'step-1': orderDetail.status>=3}"><i class="icon-circle"></i><span class="txt">待收货</span></li>
          <li class="item last" :class="{'step-1': orderDetail.status>=4}"><i class="icon-circle"></i><span class="txt">已完成</span></li>
        </ul>
        <div v-else class="order-canncel-tips">
          <h2 class="title">订单已经{{orderDetail.status == 6 ? '退货' : '取消'}}</h2>
          <p>如有退款7个工作日内退还到原支付渠道，有疑问请联系客服</p>
        </div>
        <div class="panel order-info">
          <div class="left">
            <p><span class="title">订单编号:</span> {{orderDetail.order_id}}</p>
            <p><span class="title">下单时间:</span> {{orderDetail.add_time*1000|formatDate}}</p>
          </div>
          <div class="right">
            <div class="contact" @click="contact">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kefu"></use>
              </svg>
              <span class="text">联系客服</span>
            </div>
          </div>
        </div>
        <div class="panel-group">
          <div class="panel top product" v-for="item in orderDetail.order_items">
            <div class="left">
              <div class="thumb">
                <img :src="item.show_image" @load="refreshScroll">
              </div>
              <div class="product-info">
                <div class="title">{{item.product_name}}</div>
                <template v-if="item.spec_name">
                  <div class="gift">{{item.spec_name}}</div>
                </template>
              </div>
            </div>
            <div class="right">
              <span class="price">{{itemPrice(item.settlement_price, item.quantity) | formatMoney}}</span>
              <span class="num">X{{item.quantity}}</span>
            </div>
          </div>
          <div class="total-info">
            <p><span class="title">商品合计</span><span class="price"> {{orderDetail.item_price | formatMoney}}</span></p>
            <p><span class="title">邮费</span><span class="price">{{orderDetail.delivery_fee| formatMoney}}</span></p>
            <p><span class="title">优惠券</span><span class="price"> -{{orderDetail.discount_amount | formatMoney}}</span></p>
          </div>
          <div class="panel total-info-ft">
            <div class="left">共计{{totalProduct}}商品</div>
            <div class="right">实付: <span class="price">{{orderDetail.total_price | formatMoney}}</span></div>
          </div>
        </div>
        <div class="deliver">
          <h2 class="hd">配送信息</h2>
          <div class="bd">
              <div class="left">
                <!-- <span class="title">收件人</span> -->{{orderDetail.order_address.name}}
              </div>
              <div class="right"><!-- <span class="title">手机</span>  -->{{orderDetail.order_address.phone}}</div>
            </div>
            <div class="ft">
              <!-- <span class="title">地址 </span> -->
              {{address}}
            </div>
        </div>
        <div class="deliver" v-if="orderDetail.expect_delivery_time">
          <div class="bd">
              <div class="left">
                <span class="title">配送日期</span>
              </div>
              <div class="right">{{orderDetail.expect_delivery_time}}</div>
            </div>
        </div>
      </div>
    </scroll>
    <div class="order-detail-bottom" v-if="orderDetail && orderDetail.enable_pay==1">
      <div class="order-canncel" @click="orderCancel(orderDetail.order_id)">取消订单</div>
      <div class="order-gotopay" @click="gotopay">去付款</div>
    </div>
    <div class="order-detail-bottom" v-if="orderDetail && orderDetail.enable_received==1">
      <div class="order-received" @click="orderReceived(orderDetail.order_id)">确认收货</div>
    </div>
  </div>
</template>

<script>
import {formatDate, formatMoney} from '@/utils'
import $http from '@/api'
import Scroll from './base/scroll'
import $wxpay from '@/utils/wxpay.js'
export default {
  data() {
    return {
      orderid: null,
      isHideDetail: false,
      orderDetail: null,
      ischeckLoad: false,
      cartType: 1
    }
  },
  created() {
    let id = this.$route.query.id
    this.orderid = id
    this._getOrderDetail(id)
  },
  computed: {
    address() {
      let data = this.orderDetail.order_address
      return data.province + data.city + data.address
    },
    totalProduct() {
      let prod = this.orderDetail.order_items
      return prod.reduce((total, item) => {
        return total + Number(item.quantity)
      }, 0)
    }
  },
  methods: {
    show() {
      this.isHideDetail = !this.isHideDetail
    },
    _getOrderDetail(id) {
      $http.orderDetail(id)
      .then(res => {
        if (res.code === 0) {
          this.orderDetail = res.data
        } else {
          this.$layer.toast({icon: 'icon-check',
            content: '订单获取失败，请稍后再试~',
            time: 2000
          })
        }
      })
    },
    goback() {
      this.$router.go(-1)
    },
    refreshScroll() {
      if (!this.ischeckLoad) {
        this.$refs.scrollDiv.refresh()
        this.ischeckLoad = true
      }
    },
    itemPrice(price, quantity) {
      return Number(price) * quantity
    },
    gotopay() {
      $wxpay.payAjax(this.orderDetail.order_id)
    },
    orderCancel(id) {
      this.$layer.footer({
        content: '你确定要取消当前订单?',
        btn: ['取消', '确定'],
        time: 0
      }).then(res => {
        if (res === 1) {
          $http.orderCancel(id)
          .then(res => {
            if (res.code === 0) {
              this.$router.push('/order_list')
              this.$layer.toast({icon: 'icon-check',
                content: '订单取消成功！',
                time: 2000
              })
            }
          })
        } else {
          console.log('不取消')
        }
       })
    },
    orderReceived(id) {
      $http.orderReceived(id)
      .then(res => {
        if (res.code === 0) {
          this.$layer.toast({icon: 'icon-check',
            content: '已确认收货！',
            time: 2000
          })
        }
      })
    },
    contact() {
      /* eslint-disable */
      WeixinJSBridge.call('closeWindow')
    }
  },
  filters: {
    formatDate(time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    },
    formatMoney(number) {
      return formatMoney(number, '￥')
    }
  },
  watch: {
     $route(route) {
      if (route.path === '/order_detail' && route.query.id) {
        this._getOrderDetail(route.query.id)
      }
    }
  },
  components: {
    Scroll
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/styles/order_detail';
</style>
